<template>
	<view class="content">
		<view class="box" :class="show ? 'fade-in' : 'fade-out'">
			<view class="list" v-for="(item,index) in list" :key="index">
				<image :src="item.gift_img" mode=""></image>
				<view class="name">{{item.title}}</view>
				<view class="num">x{{item.gift_num}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				show:false
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			async getList(){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/gift/gift_user'
					})
					this.list = result.data.data.gift.data
					this.show = true
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{

	.box{
		display: flex;
		flex-wrap: wrap;
		//padding: 58rpx 40rpx;
    overflow: hidden;
	}
	.list{
    width: 23%;
    position: relative;
    margin: 5px 1%;
    background: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 5px;

		image{
			width: 100rpx;
			height: 100rpx;
		}
		.name{
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 16rpx;
		}
		.num{
      height: 17px;
      background: #ff7043d9;
      border-radius: 10px;
      font-size: 12px;
      padding: 0 9px;
      font-weight: 500;
      color: #ffffff;
      line-height: 18px;
      position: absolute;
      top: 0;
      right: 0;
		}
	}
}
</style>
